@media (min-width: 1200px) {
    .container {
        width: 938px;
    }

    .the_owner_box {
        margin-top: 80px;
    }

    .owner_info_box img.big_photo {
        display: block;
    }

    .owner_info_box img.small_photo {
        display: none;
    }
}

@media (min-width: 1920px) {
    .container {
        width: 1903px;
    }

    .the_owner_box {
        margin-top: 50px;
    }

    .owner_info_box img.big_photo {
        display: block;
    }

    .owner_info_box img.small_photo {
        display: none;
    }
}

@media screen and (min-width: 980px) and (max-width: 1200px) {
    .wheremycar {
        font-size: 12px;
    }

    .welcome_user {
        position: absolute;
        top: 0;
        right: 20px;
        line-height: 76px;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
    }

    .mileage_box {
        font-size: 14px;
        width: 29%;
    }

    .owner_info_box img.big_photo {
        display: block;
    }

    .owner_info_box img.small_photo {
        display: none;
    }

    .the_owner_box {
        margin-top: 108px;
    }

    .footer a {
        top: 70px;
        left: 44px;
    }

    .footer span {
        font-size: 32px;
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    html, body {
        min-width: 320px;
            height: 100%;
    }

    body {
        height: 100%;
        background: url("../../styles/img/car_details/m_body_bg.png");
        background-size: 100%;
    }

    .car-details-box {
        min-width: 320px;
    }

    .header {
        height: 32px;
        background: url("../../styles/img/car_details/mheader.png") no-repeat 1px 1px;
        background-size: 100% 32px;
    }

    .header_title {
        overflow: hidden;
        margin-left: 0;
    }

    .mileage_box {
        margin-top: 11px;
        padding-left: 16px;
        width: 242px;
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
    }

    .total_mileage {
        float: left;
        line-height: 22px;
    }

    .mileage {
        float: right;
        line-height: 22px;
    }

    .welcome_user {
        display: none;
    }

    .container {
        padding-right: 10px;
        padding-left: 10px;
        margin-bottom: 20px;
    }

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    .show_map_box {
        margin: 0;
        padding-top: 10px;
        width: 100%;
        height: 358px;
    }

    .map_bg {
        display: none;
    }

    .map_container {
        border-top: 1px solid #266eaf;
        border-bottom: 1px solid #266eaf;
    }

    .on_map_car {
        height: 358px;
    }

    .position_info_box {
        position: absolute;
        top: 10px;
        left: 5px;
        margin-left: -5px;
        line-height: 24px;
        z-index: 0;
    }

    .car_location_info {
        padding: 2px;
        font-size: 12px;
        border: 1px solid #3297fb;
        font-style: normal;
    }

    .car_location_info p {
        padding-left: 24px;
        line-height: 18px;
    }

    .car_location_info p:nth-child(1) {
        background: url("../../styles/img/car_details/m_icon.png") no-repeat 2px 0;
    }

    .car_location_info p:nth-child(2) {
        background: url("../../styles/img/car_details/m_icon.png") no-repeat 2px -18px;
    }

    .car_location_info p:nth-child(3) {
        background: url("../../styles/img/car_details/m_icon.png") no-repeat 1px -37px;
    }

    .car_location_info p:nth-child(4) {
        border: 0;
        background: url("../../styles/img/car_details/m_icon.png") no-repeat 0 -55px;
    }

    .the_owner_box {
        margin-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    .driver_info_box {
        margin: 0 auto;
        width: 100%;
        height: 413px;
        background: url('../../styles/img/car_details/Minstrument_board_footer.png') no-repeat 1px 142px;
        background-size: 100% 45px;
    }

    .instrument_board_left {
        position: absolute;
        top: 0;
        left: 0;
        width: 146px;
        height: 151px;
        background: url("../../styles/img/car_details/Minstrument_board_left.png") no-repeat left top;
        background-size: 146px 151px;
    }

    .instrument_board_right {
        position: absolute;
        top: 0;
        right: 0;
        width: 146px;
        /*width: 164px;*/
        height: 151px;
        background: url("../../styles/img/car_details/Minstrument_board_right.png") no-repeat right top;
        background-size: 100%;
    }

    .temperature_date_box {
        bottom: 240px;
        font-size: 12px;
    }

    .date_box {
        font-size: 12px;
    }

    .temperature {
        padding-left: 2px;
    }

    .left_owner_info_box {
        position: relative;
        margin-left: 0;
        top: 0;
        left: 0;
    }

    .owner_info_box {
        position: relative;
        padding: 0;
        padding-top: 226px;
        width: 100%;
        height: 443px;
        top: 0;
        left: 0;
        background: url('../../styles/img/car_details/Mdriver_info.png') no-repeat center 200px;
        background-size: 100% 213px;
        z-index: 0;
    }

    .owner_info_box img.big_photo {
        display: none;
    }

    .owner_info_box img.small_photo {
        margin: 6px;
        width: 109px;
        height: 172px;
    }

    .owner_info {
        padding-left: 0;
        float: none;
    }

    .owner_info p {
        padding: 0;
        width: 200px;
        line-height: 34px;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*指针*/
    .v_pointer, .r_pointer, .v_speed, .oil_content {
        /*display: none;*/
    }

    .r_pointer {
        position: absolute;
        top: 31px;
        left: 31px;
        width: 113px;
        height: 67px;
        background: url('../../styles/img/car_details/Mr_pointer.png') no-repeat -12px 27px;
        transform: rotate(-55deg);
    }

    .water_temperature_box {
        overflow: hidden;
        position: absolute;
        left: -24px;
        bottom: 273px;
        width: 104px;
        height: 55px;
        z-index: 0;
    }

    .cover_box {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 68px;
    }

    .water_temperature {
        position: absolute;
        top: 0;
        width: 100%;
        bottom: 0;
        background: url('../../styles/img/car_details/Mwaterbg.png') no-repeat 29px 5px;
        background-size: 55px 66px;
    }

    .v_pointer {
        top: 6px;
        right: 58px;
        width: 62px;
        height: 114px;
        background: url('../../styles/img/car_details/Mv_pointer.png') no-repeat 28px 85px;
    }

    .v_speed span:nth-child(2) {
        position: absolute;
        top: -30px;
        left: 24px;
    }

    .v_speed span:nth-child(1) {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        position: absolute;
        top: -46px;
        left: 4px;
        width: 48px;
    }

    .oil_content {
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 277px;
        width: 112px;
        height: 121px;
        z-index: 0;
    }

    .cover_oil_box {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 121px;
    }

    .green_oil_box {
        background: url('../../styles/img/car_details/green_oil.png') no-repeat 54px 0;
        background-size: 57px 121px;
    }

    .red_oil_box {
        background: url('../../styles/img/car_details/red_oil.png') no-repeat 54px 0;
        background-size: 57px 121px;
    }

    .car_data_box {
        overflow: hidden;
        margin-top: 20px;
        width: 100%;
        background: none;
    }

    .data_thead {
        margin-top: 0;
        margin-left: 0;
        width: 100%;
        height: 47px;
    }

    .data_thead span:nth-child(1) {
        float: left;
        margin-left: 20px;
        line-height: 47px;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
    }

    .data_thead a {
        float: right;
        padding-right: 10px;
        line-height: 47px;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
    }

    .car_data_table {
        overflow: hidden;
        float: left;
        margin-left: 0;
        width: 100%;
    }

    .table-bordered > tbody > tr > td {
        width: 25%;
        line-height: 53px;
        font-size: 18px;
        font-style: normal;
    }

    .car_data_table td.first_td {
        border-left: 1px solid #35a0ff;
    }

    .car_data_table tr.last_tr td {
        border-bottom: 1px solid #35a0ff;
    }

    .car_interior {
        margin: 0;
        padding: 0;
        padding-top: 34px;
        margin-top: 10px;
        width: 100%;
        height: 256px;
        background: url('../../styles/img/car_details/car_interior.png') no-repeat;
    }

    .car_interior {
        overflow: hidden;
    }

    .banner {
        width: 100%;
        height: 256px;
    }

    .banner ul .slider-item {
        float: left;
        width: 362px;
        /*width: 100%;*/
        max-height: 256px;
        min-height: 222px;
        position: relative;
        overflow: hidden;
    }

    .slider-item img {
        width: 100%;
        height: 100%;
    }

    .banner .dots {
        bottom: 15px;
    }

    .banner .arrow {
        width: 10px;
        height: 14px;
    }

    .footer {
        height: 30px;
        background: url('../../styles/img/car_details/Mfooter.png') no-repeat center;
        background-size: 100% 30px;
    }

    .footer a, .footer span {
        display: none;
    }
}